<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        h1 {
            text-align: center
        }

        table {
            margin: 0 auto;
            width: 60%;
            border: 2px solid #09C;
            border-collapse: collapse
        }

        table th,
        table td {
            border: 2px solid #09C;
            padding: 5px;

        }

        th {
            background-color: #0CC;
        }
    </style>
</head>

<body>
    <h1>真划算</h1>
    <table>
        <tr>
            <th>id</th>
            <th>商品</th>
            <th>单价(元)</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>罗技M185鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>微软X470键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center">
                <input type="button" value="加入购物车" onclick="add_cart(this);" />
            </td>
        </tr>
    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>选中</th>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="goods">
            <!-- <tr>
                <td align="center"><input type="checkbox" /></td>
                <td>罗技M185鼠标</td>
                <td>80</td>
                <td align="center">
                    <input type="button" value="-" onclick="decrease(this)" />
                    <input type="text" size="3" readonly value="1" />
                    <input type="button" value="+" onclick="increase(this)" />
                </td>
                <td>80</td>
                <td align="center"><input type="button" value="x"  onclick="del(this)" /></td>
            </tr> -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" align="left">
                   <label><input type="checkbox" id="checkall" onclick="handleSelectAll(this)">全选</label>
                </td>
                <td colspan="4" align="center">
                    已选择 <span id="total_quantity">0</span> 件商品
                    应付总额：￥<span id="total_price">0</span>
                </td>
            </tr>
        </tfoot>
    </table>
    <script>
        // 对象的结构{id,name,price,quantity,checked}
        let cart = []

        // function getIndexByName(name){
        //     let result = -1
        //     cart.forEach((obj,index)=>{
        //         if(obj.name == name){
        //             result = index
        //         }
        //     })
        //     return result
        // }

        // function getIndexById(id){
        //     let result = -1
        //     cart.forEach((obj,index)=>{
        //         if(obj.id == id){
        //             result = index
        //         }
        //     })
        //     return result
        // }

        function getIndexByProp(prop,value){
            let result = -1
            for (let index = 0; index < cart.length; index++) {
                const element = cart[index];
                if(element[prop] == value){
                    result = index
                    break
                }
            }
            return result
        }

        function getMaxId(){
            if(cart.length == 0){
                return 1
            }else{
                return cart[cart.length - 1].id + 1
            }
        }

        function calcTotalInfo(){
            let totalPrice = 0
            let totalQuantity = 0

            for (const item of cart) {
                if(item.checked){
                    totalPrice += item.price * item.quantity
                    totalQuantity += item.quantity
                }
            }

            return [totalPrice,totalQuantity]
        }

        function handleSelect(id,obj){
            // const index = getIndexById(id)
            const index = getIndexByProp('id',id)
            console.log(obj,obj.checked)
            
            cart[index].checked = obj.checked
            render()
        }

        function handleSelectAll(obj){
            for (const item of cart) {
                item.checked = obj.checked
            }
            render()
        }

        function increase(id){
            let index = getIndexByProp('id',id)
            cart[index].quantity++
            render()
        }

        function decrease(id){
            let index = getIndexByProp('id',id)
            if(cart[index].quantity <= 1){
                return
            }else{
                cart[index].quantity--
            }
            render()
        }

        function del(id){
            let index = getIndexByProp('id',id)
            cart.splice(index,1)
            render()
        }

        function render(){
            let tbody = document.querySelector('#goods')
            tbody.innerHTML = ''

            let trs = ''
            for (const data of cart) {
                let row = `
                    <tr>
                        <td align="center">
                            <input type="checkbox" ${data.checked ? "checked" : ""} 
                                   onclick="handleSelect(${data.id},this)" />
                        </td>
                        <td>${data.name}</td>
                        <td>${data.price}</td>
                        <td align="center">
                            <input type="button" value="-" onclick="decrease(${data.id})" />
                            <input type="text" size="3" readonly value="${data.quantity}" />
                            <input type="button" value="+" onclick="increase(${data.id})" />
                        </td>
                        <td>${data.price * data.quantity}</td>
                        <td align="center"><input type="button" value="x"  onclick="del(${data.id})" /></td>
                    </tr>
                `
                trs += row
            }
            tbody.innerHTML = trs
            
            //合计
            let [totalPrice,totalQuantity] = calcTotalInfo()
            document.querySelector('#total_quantity').innerText = totalQuantity
            document.querySelector('#total_price').innerText = totalPrice

            // 选中
            document.querySelector('#checkall').checked = cart.every(item=>item.checked)

            console.log('cart',cart)            
        }

        function add_cart(btn){
            const tr = btn.parentNode.parentNode
            let tds = tr.children
            const id = tds[0].innerText
            const name = tds[1].innerText
            const price = +tds[2].innerText

            const index = getIndexByProp('name',name)
            console.log('index',index)            
            if(index < 0){
                cart.push({
                    id,
                    name,
                    price,
                    quantity:1,
                    checked:false
                })
            }else{
                cart[index].quantity++
            }  
            render()        
        }
    
    </script>
</body>

</html>